<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-07-17 09:24:55
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 14:21:19
 * @FilePath: /amap-web-vr/src/views/home/components/map-header-view.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <el-menu class="header-container" mode="horizontal" :ellipsis="false">
    <el-menu-item index="0">
      <img class="logo" src="@/assets/images/logo.png" alt="" />
      <span style="margin-left: 5px">三维地图发现</span>
    </el-menu-item>
    <el-menu-item index="1" @click="onFlyHome">首页</el-menu-item>
    <!-- <el-menu-item index="2" @click="emits('video')">地史馆</el-menu-item>
    <el-menu-item index="3" @click="emits('video')">上传全景图</el-menu-item>
    <el-menu-item index="3" @click="emits('video')">我的足迹</el-menu-item>
    <el-menu-item index="3" @click="emits('video')">我的收藏</el-menu-item> -->
    <el-menu-item index="5" >地图设置</el-menu-item>
    <el-menu-item index="4" >使用教程</el-menu-item>
    <el-menu-item index="6" >关于</el-menu-item>
    <el-menu-item index="7">
      <el-popover
        placement="bottom"
      >
        <template #reference> <span>下载</span></template>
        <img src="@/assets/images/ic_app_download.jpg" fit="contain" />
      </el-popover>
    </el-menu-item>
    <el-menu-item index="8" ><vc-login-control /></el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import VcLoginControl from '../control/vc-login-control/index.vue'
import { useCustomCesium } from "../control/useCustomCesium";
const {vueCesium} = useCustomCesium();
const onFlyHome = ()=>{
    vueCesium.viewer.camera.flyHome()
}
</script>

<style scoped lang="scss">
.header-container {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 1000;
  height: 24px;
  .el-menu-item {
    &:first-child {
      .logo {
        width: 20px;
        height: 20px;
        border-radius: 5px;
      }
      span {
        margin-left: 5px;
        line-height: 20px;
        height: 20px;
      }
    }
    &:nth-child(6){
        margin-right: auto;
    }
    span{
      line-height: 24px;
      height: 24px;
    }
   

   
  }
  
}
 
 
</style>

<style lang="scss">
.el-popover{
    padding: 10px 5px 5px 5px !important;
    border: none !important;
    img{
        width: 140px;
        height: 140px
    }
}

</style>
